<template>
  <div class="container">
    <div class="menu">
      <h2>我是根菜单</h2>
      <ul>
        <li @click="onChange(1)">父组件传递子组件</li>
        <li @click="onChange(2)">自定义事件</li>
        <li @click="onChange(3)">mitt框架事件</li>
        <li>
          <RouterLink to="/father">v-model绑定事件</RouterLink>
        </li>
        <li>
          <RouterLink to="/attr">attr属性</RouterLink>
        </li>
        <li>
          <RouterLink to="/refs">Refs和parant属性</RouterLink>
        </li>
        <li>
          <RouterLink to="/grandParent">provider和inject属性</RouterLink>
        </li>
        <li>
          <RouterLink to="/slot">slot插槽</RouterLink>
        </li>
      </ul>
    </div>
    <div class="demo">
      <Father v-if="showStatus === 1"/>
      <Person2 v-if="showStatus === 2"/>
      <Person-Mitt v-if="showStatus === 3"></Person-Mitt>
      <RouterView></RouterView>
    </div>
  </div>
  
</template>


<script lang="ts" setup name="App">
import { ref } from "vue";
import Father from "./components/demo1/Person.vue";
import Person2 from "./components/demo2/Person.vue";
import PersonMitt from "./components/demo3-mitt/Person.vue";
import { RouterLink,RouterView } from "vue-router";
let showStatus= ref(0)
function onChange(type:number) {
  showStatus.value=type;
}
</script>



<style scoped>
 .container {
  display: flex; /* 使用 Flexbox 布局 */
}

.menu {
  /* width: 200px; */
  flex: 1; /* 填充剩余空间 */
}

.demo {
  flex: 1; /* 填充剩余空间 */
}
</style>
